<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Flickr Photo Wall - Tutorial by Kyle Rush - kylerush.net</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">$( function() {
				jQuery('#a-link').remove();

				jQuery('<img />').attr('id', 'loader').attr('src', 'ajax-loader.gif').appendTo('#image-container');

				//assign your api key equal to a variable
				var apiKey = '4ef2fe2affcdd6e13218f5ddd0e2500d';

				//the initial json request to flickr
				//to get your latest public photos, use this request: http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' + apiKey + '&user_id=29096781@N02&per_page=15&page=2&format=json&jsoncallback=?
				$.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' + apiKey + '&photoset_id=72157619415192530&format=json&jsoncallback=?', function(data) {

					//loop through the results with the following function
					$.each(data.photoset.photo, function(i,item) {

						//build the url of the photo in order to link to it
						var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';

						//turn the photo id into a variable
						var photoID = item.id;

						//use another ajax request to get the geo location data for the image
						$.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.geo.getLocation&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?', function(data) {

							//if the image has a location, build an html snippet containing the data
							if(data.stat != 'fail') {
								pLocation = '<a target="_blank" href="http://www.flickr.com/map?fLat=' + data.photo.location.latitude + '&fLon=' + data.photo.location.longitude + '&zl=1">' + data.photo.location.locality._content + ', ' + data.photo.location.region._content + ' (Click for Map)</a>';
							}
						});
						//use another ajax request to get the tags of the image
						$.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?', function(data) {

							//if the image has tags
							if(data.photo.tags.tag != '') {

								//create an empty array to contain all the tags
								var tagsArr = new Array();

								//for each tag, run this function
								$.each(data.photo.tags.tag, function(j, item) {

									//push each tag into the empty 'tagsArr' created above
									tagsArr.push('<a href="http://www.flickr.com/photos/tags/' + item._content + '">' + item.raw + '</a>');

								});
								//turn the tags array into a string variable
								var tags = tagsArr.join(', ');
							}

							//create an imgCont string variable which will hold all the link location, title, author link, and author name into a text string
							var imgCont = '<div class="image-container" style="background: url(' + photoURL + ');"><div class="image-info"><p class="top"><a class="title" href="http://www.flickr.com/photos/' + data.photo.owner.nsid + '/' + photoID + '">' + data.photo.title._content + '</a> <span class="author">by <a href="http://flickr.com/photos/' + data.photo.owner.nsid + '">' + data.photo.owner.username + '</a></span></p><div class="bottom"><p><span class="infoTitle">Comments:</span> ' + data.photo.comments._content + '</p>';

							//if there are tags associated with the image
							if (typeof(tags) != 'undefined') {

								//combine the tags with an html snippet and add them to the end of the 'imgCont' variable
								imgCont += '<p><span class="infoTitle">Tags:</span> ' + tags + '</p>';
							}

							//if the image has geo location information associate with it
							if(typeof(pLocation) != 'undefined') {

								//combine the geo location data into an html snippet and at that to the end fo the 'imgCont' variable
								imgCont += '<p><span class="infoTitle">Location:</span> ' + pLocation + '</p>';
							}

							//add the description & html snippet to the end of the 'imgCont' variable
							imgCont += '<p><span class="infoTitle">Decription:</span> ' + data.photo.description._content + '</p></div></div>';

							//append the 'imgCont' variable to the document
							$(imgCont).appendTo('#image-container');

							//delete the pLocation global variable so that it does not repeat
							delete pLocation;
						});
					});
				});
				//assign hover actions to each image
				$('.image-container').live('mouseover', function() {
					$(this).children('div').attr('class', 'image-info-active');
				});
				$('.image-container').live('mouseout', function() {
					$(this).children('div').attr('class', 'image-info');
				});
				jQuery('#loader').remove();

			});</script>
		<style type="text/css">		body, html {
				background: #000;
				font-size: 12px;
			}
			#loader {
				margin: 20px 0 40px 350px;
			}
			.image-container {
				height: 180px;
				width: 240px;
				position: relative;
				float: left;
				margin: 0 20px 20px 0;
				background-color: #666;
				border: 5px solid #fff;
				overflow: hidden;
			}
			.image-info {
				display: none;
			}
			.image-info-active {
				height: 180px;
				width: 240px;
				background: rgba(255,255,255,.85);
			}
			a {
				cursor: pointer;
				text-decoration: none;
				color: #0063dc;
			}
			a:hover {
				color: #fff;
				background: #0063dc;
			}
			a.title {
				color: #ff0084;
			}
			a.title:hover {
				color: #fff;
				background: #ff0084;
			}
			.bottom {
				padding: 5px;
			}
			.bottom p {
				margin: 0 0 5px 0;
			}
			p.top {
				background: #fff;
				width: 240px;
				padding: 0 0 5px 0;
				margin: 0;
			}
			a.title {
				font-size: 20px;
				font-weight: bold;
				display: block;
				line-height: 20px;
			}
			span.author {
				font-size: 10px;
			}
			.infoTitle {
				font-weight: bold;
				text-trasnform: uppercase;
			}
			.clearfix:after {
				content:".";
				display:block;
				height:0;
				clear:both;
				visibility:hidden;
			}
			.clearfix {
				display:inline-block;
			}
			.clearfix {
				display:block;
			}</style>
	</head>
	<body>
		<div id="image-container" class="clearfix">
		</div><!--#image-container-->
	</body>
</html>

